import { useEffect, useRef, useState } from "react"
import "./index.less"
import BillItem from "@/components/BillItem"
import { PullToRefresh, InfiniteScroll } from "antd-mobile"
import dayjs from "dayjs"
import { getBillListApi } from "@/apis"
import PopupType from "@/components/Popup"
import PopupDate from "@/components/PopupDate"
import IconFont from "@/components/CustomIcon"
import PopupAddBill from "@/components/PopupAddBill"
function Home() {
  const [currentTime, setCurrentTime] = useState(dayjs().format("YYYY-MM")) // 当前筛选时间
  const [page, setPage] = useState(1) // 分页
  const [list, setList] = useState([]) // 账单列表
  const [totalPage, setTotalPage] = useState(0) // 分页总数
  const [hasMore, setHasMore] = useState(false)
  const [currentSelect, setCurrentSelect] = useState({}) //当前筛选的类型
  const [totalExpense, setTotalExpense] = useState(0) // 总支出
  const [totalIncome, setTotalIncome] = useState(0) // 总收入
  const typeRef = useRef()
  const dateRef = useRef()
  const addBillRef = useRef()

  const getBillList = async () => {
    const { data } = await getBillListApi(
      page,
      currentTime,
      currentSelect.id || "all"
    )

    if (page === 1) {
      setList(data.data.list)
    } else {
      setList(list.concat(data.data.list))
    }
    setTotalPage(data.data.totalPage)

    setTotalExpense(data.data.totalExpense)
    setTotalIncome(data.data.totalIncome)
  }

  useEffect(() => {
    getBillList()
    setHasMore(page < totalPage)
  }, [page, currentSelect, currentTime])

  const refreshData = async () => {
    if (page !== 1) {
      setPage(1)
    } else {
      getBillList()
    }
  }

  const loadData = () => {
    if (page < totalPage) {
      setPage(page + 1)
    }
  }

  const toggle = () => {
    typeRef.current && typeRef.current.showP()
  }

  const toggle2 = () => {
    dateRef.current && dateRef.current.showP()
  }

  const select = (item) => {
    setPage(1)
    setCurrentSelect(item)
  }

  const selectMonth = (item) => {
    setPage(1)
    setCurrentTime(item)
  }

  const addToggle = () => {
    addBillRef.current && addBillRef.current.showP()
    addBillRef.current && addBillRef.current.showKey()
  }

  return (
    <div className="home">
      <div className="header">
        <div className="dataWrap">
          <span className="expense">
            总支出：<b>¥ {totalExpense.toFixed(2)}</b>
          </span>
          <span className="income">
            总收入：<b>¥ {totalIncome.toFixed(2)}</b>
          </span>
        </div>
        <div className="typeWrap">
          <div className="left" onClick={toggle}>
            <span className="title">{currentSelect.name || "全部类型"}</span>
          </div>
          <div className="right" onClick={toggle2}>
            <span className="time">{currentTime}</span>
          </div>
        </div>
      </div>
      <div className="contentWrap">
        {totalPage === 0 ? (
          <div className="empty">
            <img
              src="http://s.yezgea02.com/1619144597039/empty.png"
              alt=""
              className="noneImg"
            />
            <span>暂无数据</span>
          </div>
        ) : (
          <div>
            {list.length ? (
              <>
                <PullToRefresh onRefresh={() => refreshData()}>
                  {list.map((item, index) => (
                    <BillItem key={index} bill={item}></BillItem>
                  ))}
                </PullToRefresh>
                <InfiniteScroll
                  loadMore={loadData}
                  hasMore={hasMore}
                ></InfiniteScroll>
              </>
            ) : null}
          </div>
        )}
        <div className="add" onClick={addToggle}>
          <IconFont type="tianjia"></IconFont>
        </div>
      </div>
      <PopupType ref={typeRef} onSelect={select}></PopupType>
      <PopupAddBill ref={addBillRef} onReload={refreshData}></PopupAddBill>
      <PopupDate ref={dateRef} onSelect={selectMonth} mode="month"></PopupDate>
    </div>
  )
}

export default Home
